<template>
  <div>
    <div class="mine">
      <div class="mine_head">
        <div class="mine_img">
          <div class="mine_img_inner">
            <input type="file" accept="image/png,image/gif,image/jpeg" @change="editImg">
            <img :src="imgUrl" alt="">
          </div>
          <img class="mine_camera" src="../static/img/camera.png" alt="">
        </div>
        <p class="mine_name">{{name}}<span @click="showEditNameBox"></span></p>
      </div>
      <ul class="mine_list">
        <!--<li><router-link to="/listOffline"><img src="../static/img/mine_icon_lx.png" alt="">{{$t('m.download')}}</router-link></li>-->
        <li><router-link to="/listFoot"><img src="../static/img/mine_icon_foot.png" alt="">{{$t('m.footprint')}}</router-link></li>
        <li><router-link to="/listSave"><img src="../static/img/mine_icon_save.png" alt="">{{$t('m.like')}}</router-link></li>
        <li><router-link to="/setting"><img src="../static/img/mine_icon_setting.png" alt="">{{$t('m.setting')}}</router-link></li>
      </ul>
    </div>
  </div>
</template>

<script type="text/ecmascript-6">
  import imgUrl from '../static/img/head.png'
    import { MessageBox } from 'mint-ui';
    export default {
      data(){
        return{
          name:'Landon Gibson',
          imgUrl:imgUrl
        }
      },
      methods:{
        showEditNameBox(){
          let that = this;
          let userName = that.name;
          MessageBox.prompt(' ','修改昵称',{inputValue:userName}).then(({ value, action }) => {
            var formData = new FormData();
            formData.append("id", sessionStorage.getItem('userId'));
            formData.append("nick_name", value);
            this.$axios({
              method:'POST',
              url:this.$store.state.apiUrl+'user/updateuser',
              data:formData
            }).then(function (res) {
              console.log(res)
              MessageBox('提示', '修改昵称成功');
              that.name = value;
            })
          }).catch(()=>{

          });
        },
        editImg(e){
          let that = this;
          let file = e.target.files[0];
          let param = new FormData(); //创建form对象
          param.append('file',file,file.name);//通过append向form对象添加数据
          param.append('chunk','0');//添加form表单中其他数据
          param.append("id", sessionStorage.getItem('userId'));
          //console.log(param.get('file')); //FormData私有类对象，访问不到，可以通过get判断值是否传进去
          let config = {
            headers:{'Content-Type':'multipart/form-data'}
          };  //添加请求头
          this.$axios.post(this.$store.state.apiUrl+'user/updateuser',param,config)
            .then(response=>{
              //console.log(response.data);
              that.getUserInfo();
            })
        },
        getUserInfo(){
          let that = this;
          this.$axios.get(this.$store.state.apiUrl+'index/returnUser',{
            params:{
              phone:sessionStorage.getItem('phone')
            }
          })
            .then(function (res) {
              console.log(res)
              if ( res.data.nick_name == null ){
                that.name = res.data.phone;
              } else{
                that.name = res.data.nick_name;
              }
              if ( res.data.imageUrl != ' ' ){
                that.imgUrl = res.data.imageUrl;
              }else{
                //
              }
            })
            .catch(function (error) {
              console.log('操作失败');
            });
        }
      },
      mounted(){
        this.$store.state.showTab = true;
       // this.$store.state.isLogin = sessionStorage.getItem('isLogin');
      },
      created(){
        if ( !sessionStorage.getItem('isLogin') ){
          this.$store.state.isLogin = 0;
        }else {
          this.$store.state.isLogin = sessionStorage.getItem('isLogin');
        }
        this.getUserInfo();
      }
    };
</script>

<style scoped="scoped" lang="stylus" rel="stylesheet/stylus" type="text/stylus">
  border-1px()
    content ''
    position absolute
    width 100%
    height 1px
    left 0
    bottom 0
    border-top 1px solid #F5F5F5
    -webkit-transform-origin 0 100%
    transform-origin 0 100%
    -webkit-transform scaleY(0.5)
    transform scaleY(0.5)
  .mine
    padding 0.85rem 0.15rem 0
    position relative
    &::after
      content ''
      position absolute
      width 100%
      height 2.2rem
      background-image linear-gradient(-269deg, #FFAC0E 0%, #FFE1A7 100%)
      top 0
      left 0
      z-index 0
    .mine_head
      background #fff
      border-radius 5px
      padding 0.5rem 0 0.38rem
      box-shadow  0 2px 6px 0 rgba(0,0,0,0.10)
      position relative
      z-index 1
    .mine_img
      width 0.95rem
      height 0.95rem
      border-radius 50%
      position relative
      margin 0 auto
    .mine_img_inner
      width 0.95rem
      height 0.95rem
      border-radius 50%
      overflow hidden
      position relative
      input
        position absolute
        width 100%
        height 100%
        top 0
        left 0
        opacity 0
      img
        width 100%
    .mine_camera
      position absolute
      right 0
      bottom 0
      width 0.26rem
      height 0.26rem
  .mine_name
    font-size 0.18rem
    color #333333
    text-align center
    margin-top 0.2rem
    span
      display inline-block
      vertical-align middle
      width 0.18rem
      height 0.18rem
      background url("../static/img/edit.png") no-repeat
      background-size 100% auto
      margin-left 0.1rem
  .mine_list
    box-shadow  0 5px 10px 0 rgba(0,0,0,0.08)
    padding 0 0.05rem
    margin-top 0.2rem
    li
      position relative
      height 0.5rem
      &::after
        content ''
        border-1px()
      a
        -webkit-display flex
        display flex
        font-size 0.15rem
        color #000
        align-items center
        height 100%
        padding 0 0.15rem
        width 100%
        &:active
          background #f7f7f7
        &::after
          content ''
          position absolute
          width 0.07rem
          height 100%
          right 0.15rem
          top 0
          background url("../static/img/more.png") right center no-repeat
          background-size 0.07rem auto
        img
          width 0.22rem
          height 0.22rem
          margin-right 0.1rem

</style>
